<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>首页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="./css/reset.css?v=1582185140875" />
  <link rel="stylesheet" href="./css/index.css?v=1582185140875" />
  <link rel="stylesheet" href="./css/animate.min.css?v=1582185140875" />
  <link rel="stylesheet" href="./css/lottery.css?v=1582185140875" />
  <link rel="stylesheet" href="./css/flex.css?v=1582185140875" />
  <link rel="stylesheet" href="./css/iosOverlay.css?v=1582185140875" />
  <link rel="stylesheet" href="./css/dialog.css?v=1582185140875" />
</head>
<style></style>

<body>
  <div class="main">
    <section class="trade-header">
      <div class="top-total">
        <div class="jin-award count">
          <div class="radius">
            <img alt="" src="./imgs/xing.png" /></div>
          <div class="count-con fxv-start ">
            <div class="sum">8855.4k</div>
            <div class="time">348/秒</div>
          </div>
        </div>
        <div class="mi-award count">
          <div class="radius">
            <img alt="" src="./imgs/zhuan.png" /></div>
          <div class="count-con fxv-start ">
            <div class="sum">9999</div>
            <div class="time">活跃:999</div>
          </div>
        </div>
        <div class="total">
          <div class="total-item mi-get">
            <img alt="" src="./imgs/zhuan.png" />
            <div class="name red-name">&nbsp;</div>
          </div>
          <a href="javascript:;" class="total-item xing-get">
            <img alt="" src="./imgs/xing.png" />
            <div class="name yellow-name">&nbsp;</div>
          </a>
        </div>
      </div>
      <div class="bottom-total total">
        <a href="./meng.html" class="total-item">
          <img alt="" src="./imgs/meng/level1.png" />
          <div class="name">萌包</div>
        </a>
        <a href="javascript:;" class="total-item lottery-item">
          <img alt="" src="./imgs/lottery.png" />
          <div class="name">大抽奖</div>
        </a>
        <a href="./top.html" class="total-item">
          <img alt="" src="./imgs/ranking.png" />
          <div class="name">排行榜</div>
        </a>
        <div class="total-item">
          <img alt="" src="./imgs/book.png" />
          <div class="name">怎么玩</div>
        </div>
      </div>
    </section>
    <div class="hb">
      <div class="hb-con">
        <img class="hb-bg normal-bg" src="./imgs/bg/hb1.jpg" alt="">
        <img class="hb-bg top-bg hide" src="./imgs/bg/hb2.jpg" alt="">
        <img src="./imgs/pet/1.gif" class="move-pet" alt="">
      </div>
    </div>

    <div class="trade-con">
      <div class="con-header">
        <a href="javascript:;" class="con-left flex tu-control">
          <img alt="" src="./imgs/pic.png" />
          <span class="name">图鉴</span>
        </a>
        <div class="con-center pulse animated infinite slow fxv-center">
          <div class="h-name">粉红鼠今日收益</div>
          <div class="num">￥150</div>
        </div>
        <a href="javascript:;" class="con-right flex ku-control">
          <div class="warehouse">
            <img alt="" src="./imgs/ku.png" />
            <span class="name">仓库</span>
          </div>
        </a>
      </div>
      <section class="grid-wrap">
        <div class="rows">
          <div class="row-item">
            <div class="move-ele" id="m00" data-oldcol="0" data-oldrow="0" data-col="0" data-row="0" data-num="1">
              <img class="animal" src="./imgs/animal/m1.png" />
              <span class="num">1</span>
            </div>
          </div>
          <div class="row-item"></div>
          <div class="row-item"></div>
          <div class="row-item"></div>
        </div>
        <div class="rows">
          <div class="row-item">

          </div>
          <div class="row-item">
            <div class="move-ele" id="m11" data-oldcol="1" data-oldrow="1" data-col="1" data-row="1" data-num="39">
              <img class="animal" src="./imgs/animal/m39.png" />
              <span class="num small">39</span>
            </div>
          </div>
          <div class="row-item"></div>
          <div class="row-item"></div>
        </div>
        <div class="rows">
          <div class="row-item">
          </div>
          <div class="row-item"></div>
          <div class="row-item"></div>
          <div class="row-item"></div>
        </div>
      </section>
      <div class="trader">
        <a href="javascript:;" class="left item model store-control"></a>
        <a href="javascript:;" class="center buy fx-center">
          <img src="./imgs/animal/m1.png" alt="">
          <div class="buy-right fxv-center">
            <div class="right-top fxj-start">
              <span class="num">36</span>
              <div class="name">短尾矮袋鼠</div>
            </div>
            <div class="right-bottom fxj-start">
              <img src="./imgs/xing.png" class="i-money" />
              <div class="i-num">188.64K</div>
            </div>
          </div>
        </a>
        <a href="javascript:;" class="right item delete"></a>
      </div>

      <!-- 添加附加效果 -->
      <audio src='./imgs/up.mp3' id="up_m00"></audio>
      <audio src='./imgs/up.mp3' id="up_m01"></audio>
      <audio src='./imgs/up.mp3' id="up_m02"></audio>
      <audio src='./imgs/up.mp3' id="up_m03"></audio>
      <audio src='./imgs/up.mp3' id="up_m10"></audio>
      <audio src='./imgs/up.mp3' id="up_m11"></audio>
      <audio src='./imgs/up.mp3' id="up_m12"></audio>
      <audio src='./imgs/up.mp3' id="up_m13"></audio>
      <audio src='./imgs/up.mp3' id="up_m20"></audio>
      <audio src='./imgs/up.mp3' id="up_m21"></audio>
      <audio src='./imgs/up.mp3' id="up_m22"></audio>
      <audio src='./imgs/up.mp3' id="up_m23"></audio>
      <audio src='./imgs/add.mp3' id="add"></audio>
      <img src='./imgs/add.gif' id="addimg"></img>
    </div>

    <!-- 底部隐藏 -->
    <!-- <div class="footer">
      <div class="footer-item fxv-center ">
        <img src="./imgs/f1.png" alt="">
        <div class="name">养鼠</div>
      </div>
      <div class="footer-item fxv-center">
        <img src="./imgs/f2.png" alt="">
        <div class="name">萌友</div>
      </div>
      <div class="footer-item fxv-center">
        <img src="./imgs/f3.png" alt="">
        <div class="name">派对</div>
      </div>
      <div class="footer-item fxv-center">
        <img src="./imgs/f4.png" alt="">
        <div class="name">我的</div>
      </div>
    </div> -->
    <div class="mask"></div>

    <!-- 抽奖 start-->
    <div id="lottery" class="lottery-wrapper dialog-wrapper">
      <img class="title" src="./imgs/goodluck.png" alt="">
      <div class="table-con">
        <table cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td class="lottery-unit lottery-unit-0">
                <span class="fxv-center con"><img src="./imgs/500m.png"></span>
              </td>
              <td class="lottery-unit lottery-unit-1">
                <span class="fxv-center con"><img src="./imgs/2p.png"></span>
              </td>
              <td class="lottery-unit lottery-unit-2">
                <span class="fxv-center con"><img src="./imgs/2000m.png"></span>
              </td>
            </tr>
            <tr>
              <td class="lottery-unit lottery-unit-3">
                <span class="fxv-center con"><img src="./imgs/3p.png"></span>
              </td>
              <td class="lottery-unit lottery-unit-4">
                <span class="fxv-center con"><img src="./imgs/again.png"></span></td>
              </td>
              <td class="lottery-unit lottery-unit-5">
                <span class="fxv-center con"><img src="./imgs/5p.png"></span>
              </td>
            </tr>
            <tr>
              <td class="lottery-unit lottery-unit-6">
                <span class="fxv-center con"><img src="./imgs/2000m.png"></span>
              </td>
              <td class="lottery-unit lottery-unit-7">
                <span class="fxv-center con"><img src="./imgs/10p.png"></span>
              </td>
              <td class="lottery-unit lottery-unit-8">
                <span class="fxv-center con"><img src="./imgs/500m.png"></span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="last">
          抽奖次数X<span class="time">5</span>
        </div>
        <div class="tip">消耗完每天凌晨赠送5次</div>
        <div class="close"></div>
      </div>
      <a href="javascript:;"
        class="begin">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </div>
    <!-- 抽奖 end-->

    <!-- YMD奖励 start-->
    <div class="mi-wrapper dialog-wrapper">
      <p class="tip">恭喜您，获得YMD！</p>
      <p class="mi-num">累积30分钟可获得YMD</p>
      <div class="mi-sum fx-center">
        <img src="./imgs/dou.png" alt="">
        <span>8857.8K</span>
      </div>
      <a href="javascript:;" class="sure-button "></a>

      <a href="javascript:;" class="close"></a>
    </div>
    <!-- YMD奖励 end-->

    <!-- 未能领取YMD start-->
    <div class="no-mi-wrapper dialog-wrapper">
      <a href="javascript:;" class="sure-button "></a>

      <a href="javascript:;" class="close"></a>
    </div>
    <!-- 未能领取YMD end-->

    <!-- 获得YMD start-->
    <div class="get-mi-wrapper dialog-wrapper">
      <a href="javascript:;" class="sure-button "></a>

      <a href="javascript:;" class="close"></a>
    </div>
    <!-- 获得YMD end-->

    <!-- 金币奖励 start-->
    <div class="jin-wrapper dialog-wrapper">
      <p class="tip">恭喜您，获得奖励！</p>
      <p class="txt">累积30分钟可获得奖励</p>
      <div class="jin-sum fx-center">
        <img src="./imgs/xing.png" alt="">
        <span>8857.8K</span>
      </div>
      <a href="javascript:;" class="sure-button "></a>
      <a href="javascript:;" class="close "></a>
    </div>
    <!-- 金币奖励 end-->

    <!-- 广告 start-->
    <div class="jin-ad-wrapper dialog-wrapper no-scale-dialog">
      <div class="ad-con fxj-start">
        <img src="./imgs/photo.png" class="photo" alt="">
        <div class="ad-center">
          <p class="title">真传奇（1刀999）</p>
          <p class="des">古天乐、渣渣辉代言免费玩，听说不用充钱.....</p>
          <div class="ping">
            <span class="fen">（5659595个评分）</span>
            <ul class="xing-list">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
        </div>
        <a class="download" href="#">下载</a>
        <a href="javascript:;" class="s-close"></a>
        <span class="txt">广告</span>
      </div>
    </div>
    <!-- 广告 end-->

    <!-- 图鉴 start-->
    <div class="tu-wrapper dialog-wrapper">
      <img src="./imgs/tu-top.png" alt="" class="top">
      <div class="tu-con">
        <section class="scroll-list tu-list">
          <div class="tu-item fx-center">
            <div class="left">
              <img class="animal" src="./imgs/animal/m2.png" alt="">
              <div class="name">猪尾鼠</div>
            </div>
            <div class="con fxv-start ">
              <div class="title">每天活得平台广告收益分红20%</div>
              <div class="line fxv-start">
                <div class="line-title">路获得径</div>
                <div class="line-item">
                  ①五只高级萌鼠合成必定获得
                </div>
                <div class="line-item">
                  ②两只Lv.37级萌鼠合成可能获得
                </div>
                <div class="line-item">
                  ②两只Lv.37级萌鼠合成可能获得
                </div>
              </div>
            </div>
          </div>
          <div class="tu-item fx-center">
            <div class="left">
              <img class="animal" src="./imgs/animal/m2.png" alt="">
              <div class="name">猪尾鼠</div>
            </div>
            <div class="con fxv-start ">
              <div class="title">每天活得平台广告收益分红20%</div>
              <div class="line fxv-start">
                <div class="line-title">路获得径</div>
                <div class="line-item">
                  ①五只高级萌鼠合成必定获得
                </div>
                <div class="line-item">
                  ②两只Lv.37级萌鼠合成可能获得
                </div>
                <div class="line-item">
                  ②两只Lv.37级萌鼠合成可能获得
                </div>
              </div>
            </div>
          </div>
          <div class="tu-item fx-center">
            <div class="left">
              <img class="animal" src="./imgs/animal/m2.png" alt="">
              <div class="name">猪尾鼠</div>
            </div>
            <div class="con fxv-start ">
              <div class="title">每天活得平台广告收益分红20%</div>
              <div class="line fxv-start">
                <div class="line-title">路获得径</div>
                <div class="line-item">
                  ①五只高级萌鼠合成必定获得
                </div>
                <div class="line-item">
                  ②两只Lv.37级萌鼠合成可能获得
                </div>
                <div class="line-item">
                  ②两只Lv.37级萌鼠合成可能获得
                </div>
              </div>
            </div>
          </div>
          <div class="tu-item fx-center">
            <div class="left">
              <img class="animal" src="./imgs/animal/m2.png" alt="">
              <div class="name">猪尾鼠</div>
            </div>
            <div class="con fxv-start ">
              <div class="title">每天活得平台广告收益分红20%</div>
              <div class="line fxv-start">
                <div class="line-title">路获得径</div>
                <div class="line-item">
                  ①五只高级萌鼠合成必定获得
                </div>
                <div class="line-item">
                  ②两只Lv.37级萌鼠合成可能获得
                </div>
                <div class="line-item">
                  ②两只Lv.37级萌鼠合成可能获得
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <a href="javascript:;" class="close"></a>
    </div>
    <!-- 图鉴 end-->

    <!-- 仓库 start-->
    <div class="ku-wrapper dialog-wrapper">
      <img src="./imgs/ku-top.png" alt="" class="top">
      <section class="ku-list scroll-list ">
        <div class="ku-item on fx-center">
          <div class="left fx-center">
            <img class="animal" src="./imgs/animal/m2.png" alt="">
            <div class="num">2</div>
          </div>
          <div class="center fx-center">小埃及跳鼠</div>
          <div class="right fx-center">1只</div>
        </div>
        <div class="ku-item fx-center">
          <div class="left fx-center">
            <img class="animal" src="./imgs/animal/m1.png" alt="">
            <div class="num">1</div>
          </div>
          <div class="center fx-center">小埃及跳鼠</div>
          <div class="right fx-center">1只</div>
        </div>
        <div class="ku-item fx-center">
          <div class="left fx-center">
            <img class="animal" src="./imgs/animal/m1.png" alt="">
            <div class="num">1</div>
          </div>
          <div class="center fx-center">小埃及跳鼠</div>
          <div class="right fx-center">1只</div>
        </div>
        <div class="ku-item fx-center">
          <div class="left fx-center">
            <img class="animal" src="./imgs/animal/m1.png" alt="">
            <div class="num">1</div>
          </div>
          <div class="center fx-center">小埃及跳鼠</div>
          <div class="right fx-center">1只</div>
        </div>
      </section>

      <a href="javascript:;" class="sure-button "></a>
      <a href="javascript:;" class="close"></a>
    </div>
    <!-- 仓库 end-->

    <!-- 专卖店 start-->
    <div class="store-wrapper dialog-wrapper">
      <img src="./imgs/store-top.png" alt="" class="top">
      <div class="wrapper-con">
        <div class="sum ">
          <div class="bg fxj-start ">
            <img src="./imgs/xing.png" alt="">
            <span>8857.8K</span>
          </div>
        </div>
        <section class="store-list scroll-list ">
          <div class="store-item on fx-center">
            <div class="left fx-center">
              <img class="animal" src="./imgs/animal/m1.png" alt="">
              <div class="num">1</div>
            </div>
            <div class="center fxv-start">
              <p class="name">小埃及跳鼠</p>
              <p class="time">1015/秒</p>
              <p class="money">产生金币</p>
            </div>
            <div class="right fx-center flex">
              <div class="right-bg fxj-start">
                <img src="./imgs/xing.png" alt="">
                <span>188.64K</span>
              </div>
            </div>
          </div>
          <div class="store-item on fx-center">
            <div class="left fx-center">
              <img class="animal" src="./imgs/animal/m1.png" alt="">
              <div class="num">1</div>
            </div>
            <div class="center fxv-start">
              <p class="name">小埃及跳鼠</p>
              <p class="time">1015/秒</p>
              <p class="money">产生金币</p>
            </div>
            <div class="right fx-center flex">
              <div class="right-bg fxj-start">
                <img src="./imgs/xing.png" alt="">
                <span>188.64K</span>
              </div>
            </div>
          </div>
          <div class="store-item on fx-center">
            <div class="left fx-center">
              <img class="animal" src="./imgs/animal/m1.png" alt="">
              <div class="num">1</div>
            </div>
            <div class="center fxv-start">
              <p class="name">小埃及跳鼠</p>
              <p class="time">1015/秒</p>
              <p class="money">产生金币</p>
            </div>
            <div class="right fx-center flex">
              <div class="right-bg fxj-start">
                <img src="./imgs/xing.png" alt="">
                <span>188.64K</span>
              </div>
            </div>
          </div>
          <div class="store-item on fx-center">
            <div class="left fx-center">
              <img class="animal" src="./imgs/animal/m1.png" alt="">
              <div class="num">1</div>
            </div>
            <div class="center fxv-start">
              <p class="name">小埃及跳鼠</p>
              <p class="time">1015/秒</p>
              <p class="money">产生金币</p>
            </div>
            <div class="right fx-center flex">
              <div class="right-bg fxj-start">
                <img src="./imgs/xing.png" alt="">
                <span>188.64K</span>
              </div>
            </div>
          </div>
        </section>
      </div>
      <a href="javascript:;" class="close"></a>
    </div>
    <!-- 专卖店 end-->

    <!-- 加入仓库确认弹窗 start-->
    <div class="ku-sure-wrapper dialog-wrapper no-scale-dialog">
      <div class="fxv-center">
        <img class="animal" alt="">
        <p class="tip">确定存入仓库？</p>
        <p class="txt">存入的萌鼠不会产生金币</p>
        <a href="javascript:;" class="sure-button"></a>
        <a href="javascript:;" class="close "></a>
      </div>
    </div>
    <!-- 加入仓库确认弹窗 end-->


    <!-- 加入回收站确认弹窗 start-->
    <div class="delete-sure-wrapper dialog-wrapper no-scale-dialog">
      <div class="fxv-center">
        <img class="animal" alt="">
        <p class="tip">回收价格</p>
        <div class="txt fx-center">
          <img src="./imgs/xing.png" alt="">
          <span>8857.8K</span>
        </div>
        <a href="javascript:;" class="sure-button"></a>
        <a href="javascript:;" class="close "></a>
      </div>
    </div>
    <!-- 加入回收站确认弹窗 end-->

</body>
<script src="./js/zepto.js?v=1582185140875"></script>
<script src="./js/index.js?v=1582185140875"></script>
<script src="./js/touch.js?v=1582185140875"></script>
<script src="./js/touchEndCallback.js?v=1582185140875"></script>
<script src="./js/touchEnd.js?v=1582185140875"></script>
<script src="./js/money.js?v=1582185140875"></script>
<script src="./js/lottery.js?v=1582185140875"></script>
<script src="./js/iosOverlay.js?v=1582185140875"></script>
<script src="./js/dialog.js?v=1582185140875"></script>
<script src="./js/common.js?v=1582185140875"></script>

</html>


<script type="text/javascript">
  const wsUrl = 'ws://39.108.212.138:18308/ms'
  let ws = new WebSocket(wsUrl)

  ws.onerror = function (event){
    console.log("error: " + event.data)
  }


  ws.onopen = function (event){
    console.log("open: 连接成功1");
    var data = {
      'type': 'open',
      'uid' : 10001,
    }
    var jsonStr = JSON.stringify(data);
    ws.send(jsonStr);
  }

  ws.onmessage = function (event){
    //console.log("message: " + event.data);
    var data = JSON.parse(event.data);
    console.log(data);
  }

  setTimeout(function () {
    console.log("buy: 购买老鼠1");
    var data = {
      'type': 'buy',
      'ms_id' : 1,
    }
    var jsonStr = JSON.stringify(data);
    ws.send(jsonStr);
  },3000)


  setTimeout(function () {
    console.log("move: 移动格子6的萌鼠到格子5，因为格子5空，所以萌鼠移动到5");
    var data = {
      'type': 'move',
      'begin_cell' : 6,
      'end_cell' : 5,
    }
    var jsonStr = JSON.stringify(data);
    ws.send(jsonStr);
  },6000)

  setTimeout(function () {
    console.log("move: 移动格子5的萌鼠到格子4，因为格子4有萌鼠，并且等级不一样，所以互相换位置");
    var data = {
      'type': 'move',
      'begin_cell' : 5,
      'end_cell' : 4,
    }
    var jsonStr = JSON.stringify(data);
    ws.send(jsonStr);
  },9000)


  setTimeout(function () {
    console.log("move: 移动格子2的萌鼠到格子1，因为2和1都有萌鼠，并等级一样，所以合成");
    var data = {
      'type': 'move',
      'begin_cell' : 2,
      'end_cell' : 1,
    }
    var jsonStr = JSON.stringify(data);
    ws.send(jsonStr);
  },12000)

  ws.onclose = function (event){
    console.log("close: connection closed")
    ws.close()
  }
</script>